<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
    .box{/*外围的大盒子样式*/
        width: 720px;
        height: 378px;
        background: url();/*背景图片*/
        margin:  0 auto;/*上下为0，水平居中*/
    }
    .box div{/*外围大盒子内部的小盒子样式*/
        width: 50px;
        height: 50px;
        border: 1px solid darkgray;/*边界线1像素 实线 浅灰色*/
        position: relative;/*使用相对定位*/
        top:260px;/*相对定位顶部距离260像素*/
        float: left;/*使小盒子左浮动*/
        left: 305px;/*相对定位左侧距离305像素*/
        margin-left: 5px;/*两个小盒子之间空出5px*/
        color: red;/*字体颜色为红色*/
        text-align: center;/*字体居中显示*/
        line-height: 50px;/*字体行高50像素*/
    }
    </style>
</head>
<body>
    <div class="box">
<div id="d"></div><!--剩余的天数-->
<div id="h"></div><!--剩余的小时-->
<div id="m"></div><!--剩余的分钟-->
<div id="s"></div><!--剩余的秒数-->
    </div>
    <script>
    //设置秒杀结束时间
    var endTime=new Date('2019-11-19 24:00:00');
    endSeconds=endTime.getTime();
    //定义变量保存剩余的时间
    var d=h=m=s=0;
    //设置定时器，实现限时秒杀效果
    var id=setInterval(seckill,1000);
    function seckill(){
        var nowTime=new Date();//获取当前时间
        //获取时间差，单位为秒
        var remaining=parseInt((endSeconds-nowTime.getTime())/1000);
        if(remaining>0){//判断秒杀是否过期
        //计算剩余天数（除以60*60*24取整，获取剩余的天数）
        d=parseInt(remaining/86400);
        //计算剩余小时（除以60*60转换为小时，与24小时取模，获取剩余的小时）
        h=parseInt((remaining/3600)%24);
        //计算剩余分钟（除以60转为分钟，与60取模，获取剩余分钟）
        m=parseInt((remaining/60)%60);
        //计算剩余秒（与60取模，获取剩余的秒数）
        s=parseInt(remaining%60);
        //统一利用两位数表示剩余的天、小时、分钟、秒
        d=d<10?'0'+d:d;
        h=h<10?'0'+h:h;
        m=m<10?'0'+m:m;
        s=s<10?'0'+s:s;
        }else{
            clearInterval(id);//秒杀过期，取消定时器
            d=h=m=s='00';
        }
        //将剩余的天、小时、分钟和秒显示到指定的网页中
        document.getElementById('d').innerHTML=d+'天';
        document.getElementById('h').innerHTML=d+'时';
        document.getElementById('m').innerHTML=d+'分';
        document.getElementById('s').innerHTML=d+'秒';
    }
    </script>
</body>
</html>